import router from '@/router'
import store from '@/store'
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样

// 设置 没有token 的时候 允许访问的页面 -- 俗称(白名单)
const whiteList = ['/login', '/404']
// 前置守卫
router.beforeEach(async(to, from, next) => {
  NProgress.start() // 跳转之前 把进度条开启
  if (store.getters.token) { // 如果有 token
    if (to.path === '/login') { // 去往登录页的话，直接跳转到首页
      next('/')
    } else {
      if (!store.getters.userId) {
        // 如果没有id这个值 才会调用 vuex的获取资料的action
        const result = await store.dispatch('user/getUserInfo') // 为什么要写await 因为我们想获取完资料再去放行
        // console.log(result.roles.menus)
        const routes = await store.dispatch('permission/filterRoutes', result.roles.menus)
        // console.log(routes) // 获取到用户可以访问的 动态路由
        /**
         * 除此之外，我们发现在页面刷新的时候，本来应该拥有权限的页面出现了404，这是因为404的匹配权限放在了静态路由，
         * 而动态路由在没有addRoutes之前，找不到对应的地址，就会显示404，所以我们需要将404放置到动态路由的最后
         */
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // 添加动态路由到路由表  铺路
        next(to.path)
      } else {
        next() // 如果是去往其他页面 直接放行
      }
    }
  } else { // 没有token的话
    if (whiteList.indexOf(to.path) !== -1) { // 在白名单里面查找 如果查找不到 返回值是 -1
      // 不等于 -1  就是代表查找到了 说明访问的页面是 允许访问的
      next() // 允许放行
    } else {
      //  如果在 白名单没有 找到 代表 访问是 需要权限的 跳转到登录页面
      next('/login')
    }
  }
  NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
})

//  后置守卫 在页面跳转完 之后 才会执行的代码
router.afterEach(() => {
  NProgress.done() // 跳转到页面后 就关闭进度条
})

